<script setup>
const { proxy } = getCurrentInstance()

const emit = defineEmits(['remove', 'edit', 'look'])
/**
  审核：View
  提交审核：CircleCheckFilled
  修改:Edit
  查看:Search
  删除:Delete
  入库:House
  出库:Position
  打印:Document
  交接:Sort
  提交审核 审核 入库 出库 交接 type：warning
  删除：type ：danger
  其他用 type ：primary
 */
const props = defineProps({
  list: {
    type: Array,
    default: () => [
      {
        icon: 'Edit',
        emit: 'edit',
        disabled: false,
        text: '修改',
        type: 'primary',
        hasPermi: '',
      },
      {
        icon: 'DeleteFilled',
        emit: 'remove',
        disabled: false,
        text: '删除',
        isDel: true,
        type: 'danger',
        hasPermi: '',
      },
      {
        icon: 'Search',
        emit: 'look',
        disabled: false,

        text: '查看',
        type: 'primary',
        hasPermi: '',
      },
    ],
  },
  //
  num: {
    type: Number,
    default: 3,
  },
})

/**
 * 过滤前三个
 */
const popoverList = computed(() =>
  props.list.slice(props.num, props.list.length)
)

/**
 * 保留前三个
 */
const list = computed(() => props.list.slice(0, props.num))

/**
 * 判断是否需要提示
 */
const emitClick = async (t) => {
  if (t.isDel) {
    const isf = await proxy.DelMessageBox('是否需要删除该数据？')
    if (!isf) return
    emit(t.emit)
  } else {
    emit(t.emit)
  }
}
</script>

<template>
  <div class="operate">
    <div class="operate1">
      <template v-for="(t, ind) in list">
        <el-link
          :key="ind"
          v-if="!t.noShow"
          :disabled="t.disabled"
          :icon="t.icon || 'Edit'"
          :type="t.type || 'primary'"
          v-hasPermi="[t.hasPermi]"
          @click.stop="emitClick(t)"
          >{{ t.text }}</el-link
        >
      </template>
    </div>
    <!-- 冒泡事件 -->
    <div @click.stop>
      <el-popover
        v-if="props.list.length > props.num"
        placement="top-start"
        width="auto"
        trigger="click"
      >
        <template v-for="(t, ind) in popoverList">
          <el-link
            :key="ind"
            v-if="!t.noShow"
            :disabled="t.disabled"
            :icon="t.icon || 'Edit'"
            :type="t.type || 'primary'"
            v-hasPermi="[t.hasPermi]"
            @click.stop="emitClick(t)"
            >{{ t.text }}</el-link
          >
        </template>
        <template #reference>
          <el-link type="info">更多</el-link>
        </template>
      </el-popover>
    </div>
  </div>
</template>
<style scoped lang="scss">
.operate {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.sup {
  cursor: pointer;
}
</style>
